import { Button,Space, Table, Image } from 'antd';
import React, { ReactNode, useEffect, useState } from 'react';

import type { ColumnsType } from 'antd/es/table';
// 引入图标
import {PlusOutlined, DeleteOutlined} from '@ant-design/icons';

import * as api from '@/api/product'

const { Column } = Table;

interface DataType {
    key: React.Key;
    category_id: string;
    productName: string;
    price:number;
    image?: ReactNode;
    inventory:number;
    updateTime:string;
}

type Icontent=DataType&{
    key:string,
    image:ReactNode
}

// 表格数据
const columns: ColumnsType<DataType> = [
    {
        title: '产品编号',
        dataIndex: 'category_id',
    },
    {
        title: '产品名称',
        dataIndex: 'productName',
    },
    {
        title: '单价',
        dataIndex: 'price',
    },
    {
        title: '产品图片',
        dataIndex: 'image',
    },
    {
        title:'数量',
        dataIndex:'inventory'
    },
    {
        title: '加入时间',
        dataIndex: 'updateTime',
    },
    {
        title: '操作',
        dataIndex: 'action',
    },
];

const ProductList = () => {
    // 表格数据
    const [product,setProduct]=useState()
    const [open,setOpen]=useState(false)
     //设置加载动画
     let [loading, setLoading] = useState<boolean>(false)
    let getProductList=()=>{
        setLoading(true)
        api.getProductList()
        .then((res)=>{
            // console.log(res.data.data);
            res.data.data.forEach((item:any)=>{
                item.image=<Image src={item.imageUrl} width={50} height={33}/>
                item.key=item._id
            })
            setProduct(res.data.data) 
            setLoading(false)
        })
       
    }

    useEffect(()=>{
        getProductList()
    },[product])

    return (
        <div>
            <div className="action">
                <Button className="add" type="primary" icon={<PlusOutlined/>}>
                    添加商品
                </Button>
                <Button className="del" type="primary" icon={<DeleteOutlined/>}>
                    批量删除
                </Button>
            </div>
            <Table bordered dataSource={product} columns={columns} loading={loading}>
            <Column title='产品编号' dataIndex='category_id' key='item.key' />
                <Column title="产品名称" dataIndex="productName" key='item.key'/>
                <Column title="单价" dataIndex="price" key="item.key" />
                <Column title="产品图片" dataIndex="image" key='item.key'/>
                <Column title="数量" dataIndex="inventory" key='item.key'/>
                <Column title="加入时间" dataIndex="updateTime" key="item.key" />
                <Column
                    title="操作"
                    key="action"
                    render={(_: any, record: DataType) => (
                        <Space size="middle">
                            <button>禁用</button>
                            <button>编辑</button>
                            <button>删除</button>
                        </Space>
                    )}
                />
            </Table>
        </div>
    )
}

export default ProductList